<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item flexWrapNo">
						<view>乒乓球可预约时间：</view>
						<input placeholder="请输入" placeholder-class="placeholderclass" type="number"  v-model="table_duration"/>
						<view class="flexWrapNo">
							<picker @change="bindPickerChange" :data-index="0" :value="tableIndex" :range="array">
								<view class="uni-input">{{array[tableIndex]}}</view>
							</picker>
							<text class="icon-more"></text>
						</view>
					</view>
					<!-- <view class="info-item flexWrapNo">
						<view>麻将可预约时间：</view>
						<input placeholder="请输入" placeholder-class="placeholderclass" type="number" v-model="mahjong_duration"/>
						<view class="flexWrapNo">
							<picker @change="bindPickerChange" :data-index="1" :value="mjIndex" :range="array">
								<view class="uni-input">{{array[mjIndex]}}</view>
							</picker>
							<text class="icon-more"></text>
						</view>
					</view> -->
					<view class="info-item flexWrapNo">
						<view>允许取消次数：</view>
						<input placeholder="请输入次数" placeholder-class="placeholderclass" type="number" v-model="cancel_num"/>
						<view class="flexWrapNo">
							<picker @change="bindPickerChange" :data-index="2" :value="cancelIndex" :range="numArray">
								<view class="uni-input">{{numArray[cancelIndex]}}</view>
							</picker>
							<text class="icon-more"></text>
						</view>
					</view>
					<view class="remaks-box">
						备注：超过预约次数后，本周期内将不允许用户预约
					</view>
					<!-- <view class="info-item flexWrapNo">
						<view>允许延期次数：</view>
						<input placeholder="请输入次数" placeholder-class="placeholderclass" type="number" v-model="extension_num"/>
						<view class="flexWrapNo">
							<picker @change="bindPickerChange" :data-index="3" :value="extensionIndex" :range="numArray">
								<view class="uni-input">{{numArray[extensionIndex]}}</view>
							</picker>
							<text class="icon-more"></text>
						</view>
					</view>
					<view class="remaks-box">
						备注：超过延期次数后，该订单不允许延期。
					</view> -->
					<view class="info-item flexWrapNo">
						<view>订单取消扣费比例：</view>
						<input placeholder="请输入比例" placeholder-class="placeholderclass" type="digit" v-model="cancel_rate"/>
						%
					</view>
					<view class="remaks-box">
						备注：取消预约扣除用户订单实付金额的比例，且优惠券不返还。
					</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn" @tap="limitationSetting()">提交保存</view>
				</view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'pages/manage/limitationSetting'"></guideline>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc: 0,
				array: ['天', '小时', '分钟'],
				numArray:['每天','每周','每月'],
				tableIndex: 0,
				mjIndex:0,
				cancelIndex:0,
				extensionIndex:0,
				table_duration:"",//桌台可预约时长（分钟）
				mahjong_duration:"",//麻将可预约时长（分钟）
				cancel_num:"",//可取消次数
				extension_num:"",//延期次数
				cancel_rate:"",//取消利率
			}
		},
		onLoad() {
			this.getSetInfo();
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			bindPickerChange: function(e) {
				let index = e.currentTarget.dataset.index
				if (index == 0) {
					this.tableIndex = e.detail.value
				} else if(index==1){
					this.mjIndex = e.target.value
				} else if(index==2){
					this.cancelIndex = e.target.value
				}else{
					this.extensionIndex = e.target.value
				}
			},
			// 获取参数
			getSetInfo(){
				this.$request.post(this.$api.getSetInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data
						}=res
						this.table_duration=data.days_in_advance
						this.tableIndex=Number(data.days_in_advance_type-1)
						this.mahjong_duration=data.advance_appointment_day
						this.mjIndex=Number(data.advance_appointment_day_type-1)
						this.cancel_num=data.cancel_num
						this.cancelIndex=Number(data.cancel_num_type-1)
						this.extension_num=data.extension_num
						this.extensionIndex=Number(data.extension_num_type-1)
						this.cancel_rate=data.cancel_rate
					}
				})
			},
			// 预约设置
			limitationSetting() {
				if(!this.table_duration){
					this.$tools.showToast('请输入乒乓球可预约时间');
					return;
				}
				if(this.tableIndex==0){
					if(this.table_duration>3){
						this.$tools.showToast('最多可设置3天');
						return;
					}
				}else if(this.tableIndex==1){
					if(this.table_duration>72){
						this.$tools.showToast('最多可设置72小时');
						return;
					}
				}else{
					if(this.table_duration>4320){
						this.$tools.showToast('最多可设置4,320分钟');
						return;
					}
				}
				// if(!this.mahjong_duration){
				// 	this.$tools.showToast('请输入麻将可预约时间');
				// 	return;
				// }
				if(this.mjIndex==0){
					if(this.mahjong_duration>3){
						this.$tools.showToast('最多可设置3天');
						return;
					}
				}else if(this.mjIndex==1){
					if(this.mahjong_duration>72){
						this.$tools.showToast('最多可设置72小时');
						return;
					}
				}else{
					if(this.mahjong_duration>4320){
						this.$tools.showToast('最多可设置4,320分钟');
						return;
					}
				}
				if(!this.cancel_num){
					this.$tools.showToast('请输入允许取消次数');
					return;
				}
				// if(!this.extension_num){
				// 	this.$tools.showToast('请输入允许延期次数');
				// 	return;
				// }
				if(!this.cancel_rate){
					this.$tools.showToast('请输入订单取消扣费比例');
					return;
				}
				if(this.cancel_rate>100){
					this.$tools.showToast('扣费比例不能超过100%');
					return;
				}
				this.$request.post(this.$api.limitationSetting, {
					store_id:uni.getStorageSync('store_id'),
					table_duration:this.table_duration,
					table_duration_type:Number(this.tableIndex)+1,
					mahjong_duration:this.mahjong_duration,
					mahjong_duration_type:Number(this.mjIndex)+1,
					cancel_num:this.cancel_num,
					cancel_num_type:Number(this.cancelIndex)+1,
					extension_num:this.extension_num,
					extension_num_type:Number(this.extensionIndex)+1,
					cancel_rate:this.cancel_rate
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.$tools.showToast('设置成功');
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 36upx;

		.shop-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 40upx 0;
				border-bottom: 1upx solid #36355E;
				picker{
					flex: 1;
				}
				.select-input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				.uni-input{
					width: 233upx;
					text-align:right;
				}
				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}

				.icon-more {
					border-color: #FFFFFF;
				}

				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
				}
			}
			.remaks-box{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #82819B;
				line-height: 40rpx;
				padding-left: 158upx;
				margin-top: 12upx;
			}
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
